<template>
  <div class="codeManageListComponent" v-if="oItem">
    <div class="style1" v-if="oItem.main.style === 1" :style="{backgroundColor:oItem.main.spaceColor}">
      <div class="item" v-for="l in list" :key="l.id" :style="{
        backgroundColor: oItem.main.cardBgColor,
        backgroundImage: 'url('+oItem.main.cardBgImg+')'
      }">
        <div class="body">
          <div class="d1">
            <p :style="{color:oItem.main.titleFontColor}">
              {{ l.name }}
              <i
                class="iconfont icon-xuanfuanniu-bianji"
                :style="{ color: oItem.main.tagFontColor }"
              ></i>
            </p>
            <span>
              <i class="bg" :style="{ backgroundColor: oItem.main.tagFontColor }"></i>
              <i class="n" :style="{ color: oItem.main.tagFontColor }">码名称</i>
            </span>
          </div>
          <div class="d2">
            <p>{{ l.cid }}</p>
            <span>
              <i class="bg" :style="{ backgroundColor: oItem.main.tagFontColor }"></i>
              <i class="n" :style="{ color: oItem.main.tagFontColor }">识别号</i>
            </span>
          </div>
          <div class="d3">
            <p>{{ l.sid }}</p>
            <span>
              <i class="bg" :style="{ backgroundColor: oItem.main.tagFontColor }"></i>
              <i class="n" :style="{ color: oItem.main.tagFontColor }">系统ID</i>
            </span>
          </div>
          <div class="d4">
            <button :style="{ backgroundColor: oItem.main.btnBgColor }">
              <i :class="oItem.main.btnIcon"></i>
              <span>划拨</span>
            </button>
          </div>
        </div>
        <div class="foot">{{ l.time }}</div>
      </div>
    </div>
    <div class="style2" v-if="oItem.main.style === 2">
      <ul>
        <li class="head">
          <p class="p1">码名称</p>
          <p class="p2">识别号</p>
          <p class="p3">系统ID</p>
          <p class="p4">操作</p>
        </li>
        <li class="item" v-for="l in list" :key="l.id">
          <p class="p1">
            <span :style="{color:oItem.main.titleFontColor}">{{ l.name }}</span>
            <i
              class="iconfont icon-xuanfuanniu-bianji"
              :style="{ color: oItem.main.btnBgColor }"
            ></i>
          </p>
          <p class="p2">{{ l.cid }}</p>
          <p class="p3">{{ l.sid }}</p>
          <p class="p4">
            <button :style="{ backgroundColor: oItem.main.btnBgColor }">
              <i :class="oItem.main.btnIcon"></i>
              <span>划拨</span>
            </button>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "codeManageListComponent",
  data() {
    return {
      oItem: null,
      list: [
        { id: 1, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 2, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 3, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 4, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 5, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 6, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 7, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 8, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 9, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 10, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 11, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
        { id: 12, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
      ],
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.codeManageListComponent {
  display: flex;
  flex: 1;

  .style1 {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* padding-top: 15px;
    padding-bottom: 15px;*/
    .item {
      display: flex;
      flex-direction: column;
      flex: 1;background-repeat: no-repeat;
       background-position: center center; background-size: cover;
      background-color: #fff;
      margin-bottom: 15px;
      padding: 15px;
      box-sizing: border-box;
      /* border-radius: 10px;
      margin-left: 15px;
      margin-right: 15px;*/
      box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
        -3px -3px 3px #eee;

      &:last-child {
        margin-bottom: 0;
      }
      .body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
        padding-bottom: 15px;
        .d1 {
          display: flex;
          align-items: center;
          flex-direction: column;
          p {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 16px;
            i {
              font-size: 14px;
              margin-left: 5px;
            }
          }
          span {
            font-size: 12px;
            position: relative;
            padding: 2px 5px;
            .bg {
              position: absolute;
              left: 0;
              top: 0;
              z-index: 2;
              width: 100%;
              height: 100%;
              opacity: 0.15;
              border-radius: 3px;
            }
            .n {
              font-style: normal;
            }
          }
        }
        .d2 {
          display: flex;
          align-items: center;
          flex-direction: column;
          p {
            margin-bottom: 10px;
            font-size: 16px;
          }
          span {
            font-size: 12px;
            position: relative;
            padding: 2px 5px;
            .bg {
              position: absolute;
              left: 0;
              top: 0;
              z-index: 2;
              width: 100%;
              height: 100%;
              opacity: 0.15;
              border-radius: 3px;
            }
            .n {
              font-style: normal;
            }
          }
        }
        .d3 {
          display: flex;
          align-items: center;
          flex-direction: column;
          p {
            margin-bottom: 10px;
            font-size: 16px;
          }
          span {
            font-size: 12px;
            position: relative;
            padding: 2px 5px;
            .bg {
              position: absolute;
              left: 0;
              top: 0;
              z-index: 2;
              width: 100%;
              height: 100%;
              opacity: 0.15;
              border-radius: 3px;
            }
            .n {
              font-style: normal;
            }
          }
        }
        .d4 {
          display: flex;
          align-items: center;
          flex-direction: column;
          button {
            padding: 6px 10px;
            border: none;
            border-radius: 40px;
            display: flex;
            align-items: center;
            i {
              font-size: 12px;
              width: 18px;
              height: 18px;
              border-radius: 100%;
              color: #fff;
              border: 1px solid #fff;
              box-sizing: border-box;
              margin-right: 5px;
              padding: 2px;
            }
            span {
              font-size: 14px;
              color: #fff;
            }
          }
        }
      }
      .foot {
        height: 30px;
        display: flex;
        align-items: center;
        color: #777;
      }
    }
  }
  .style2 {
    display: flex;
    flex: 1;
    ul {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      flex: 1;
      li {
        display: flex;
        align-items: center;
        height: 50px;
        p {
          width: 25%;
          display: flex;
          justify-content: center;
        }
        &.head {
          border-bottom: 1px solid #eee;
          .p1 {
            width: 25%;
          }
          .p2 {
            width: 25%;
          }
          .p3 {
            width: 25%;
          }
          .p4 {
            width: 25%;
          }
        }
        &.item {
          border-bottom: 1px solid #eee;
          margin-left: 10px;
          margin-right: 10px;
          p {
            color: #777;
          }
          .p1 {
            width: 25%;
            display: flex;
            align-items: center;
            i {
              font-size: 14px;
              margin-left: 5px;
            }
          }
          .p2 {
            width: 25%;
          }
          .p3 {
            width: 25%;
          }
          .p4 {
            width: 25%;
            button {
              padding: 7px 10px;
              border: none;
              border-radius: 40px;
              display: flex;
              align-items: center;
              i {
                font-size: 12px;
                width: 18px;
                height: 18px;
                border-radius: 100%;
                color: #fff;
                border: 1px solid #fff;
                box-sizing: border-box;
                margin-right: 5px;
                padding: 2px;
              }
              span {
                font-size: 14px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
